<template>
  <div class="app-container">
    <div class="content">
      <div class="lgm-search">
        <el-form
          ref="form"
          :model="searchParams"
          label-width="100px"
          class="search-form"
        >
          <el-form-item label="日期">
            <el-date-picker
              v-model="searchParams.time1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="供应商名称">
            <el-input
              v-model="searchParams.supplier_name"
              placeholder="请输入供应商名称"
            ></el-input>
          </el-form-item>
          <el-row>
            <el-button
              type="success"
              class="lgm-search-btn"
              icon="el-icon-search"
              @click="seach"
              >搜索</el-button
            >
            <el-button
              class="lgm-reset-btn"
              icon="el-icon-refresh"
              @click="reset"
              >重置</el-button
            >
            <!-- <el-button type="primary" plain>
                              导入入库数据
                          </el-button>
                          <el-button type="primary" plain>
                              导入出库数据
                          </el-button> -->
          </el-row>
        </el-form>
      </div>

      <div class="info">
        <div class="item">
          <p class="title">回款统计</p>
          <div class="box">{{ detail.collection_statistics }}</div>
        </div>
        <div class="item">
          <p class="title">付款统计</p>
          <div class="box">{{ detail.pay_statistics }}</div>
        </div>
        <div class="item">
          <p class="title">开票统计</p>
          <div class="box">{{ detail.invoice_statistics }}</div>
        </div>
      </div>

      <div class="table-header-btn">
        <el-button
          type="success"
          plain
          size="small"
          class="lgm-add-btn"
          icon="el-icon-plus"
          @click="addList"
          >新增</el-button
        >
        <!-- <el-button
            type="danger"
            plain
            size="small"
            icon="el-icon-delete"
            @click="deleteList"
            >删除</el-button
          > -->
      </div>

      <div class="table">
        <el-table :data="dataList" border>
          <el-table-column
            prop="payment_code"
            label="付款单号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="payment_at"
            label="付款时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="supplier_name"
            label="供应商名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="contract_no"
            label="销售合同编号"
            align="center"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="contract_price"
            label="合同金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="outstane_price"
            label="未回款金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="outstane_type"
            label="回款类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="pay_type"
            label="支付方式"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            min-width="200"
          ></el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="380"
          >
            <template slot-scope="scope">
              <div class="flex">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.$index, scope.row)"
                >
                  <i class="el-icon-edit"></i> 修改
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  @click="handleDelete(scope.$index, scope.row)"
                >
                  <i class="el-icon-delete"></i> 删除
                </el-button>
               
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="lgm-page-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[10, 100, 200, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 修改 -->
    <el-dialog
      title="财务管理"
      :visible.sync="dialogVisible"
      center
      width="900px"
    >
      <el-form
        :model="detailForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="detailForm"
      >
        <el-form-item label="类型"  style="width: 100%" label-width="200px">
          <el-radio v-model="detailForm.type" label="1">回款单</el-radio>
          <el-radio v-model="detailForm.type" label="2">回款单</el-radio>
          <el-radio v-model="detailForm.type" label="3">发票</el-radio>
        </el-form-item>
      
        <el-form-item label="付款单号" prop="payment_code"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.payment_code"></el-input>
        </el-form-item>
        <el-form-item label="付款时间" prop="payment_at"  style="width: 100%" label-width="200px">
          <el-date-picker
            v-model="detailForm.payment_at"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
             style="width: 100%" label-width="200px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应商" prop="supplier_name"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.supplier_name"></el-input>
        </el-form-item>
        <el-form-item
          label="销售合同编号"
          prop="contract_no"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.contract_no"></el-input>
        </el-form-item>
        <el-form-item label="合同金额" prop="contract_price"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.contract_price"></el-input>
        </el-form-item>
        <el-form-item
          label="回款类型，中文"
          prop="outstane_type"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.outstane_type"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" prop="pay_type"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.pay_type"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.remark"></el-input>
        </el-form-item>
        <el-form-item label="开票编号" prop="invoice_number"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.invoice_number"></el-input>
        </el-form-item>

        <el-form-item label="开票时间" prop="invoice_date"  style="width: 100%" label-width="200px">
          <el-date-picker
            v-model="detailForm.invoice_date"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
             style="width: 100%" label-width="200px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开票号码" prop="invoice_code"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.invoice_code"></el-input>
        </el-form-item>

        <el-form-item label="申请人员" prop="applicant"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.applicant"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="customer_name"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.customer_name"></el-input>
        </el-form-item>
        <el-form-item
          label="关联的销售合同编号"
          prop="sales_contract_number"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.sales_contract_number"></el-input>
        </el-form-item>
        <el-form-item
          label="关联回款"
          prop="associated_return_payment"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.associated_return_payment"></el-input>
        </el-form-item>
        <el-form-item
          label="回款金额"
          prop="return_payment_amount"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.return_payment_amount"></el-input>
        </el-form-item>
        <el-form-item label="开票金额" prop="invoice_amount"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.invoice_amount"></el-input>
        </el-form-item>
        <el-form-item label="发票类型" prop="invoice_type"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.invoice_type"></el-input>
        </el-form-item>
        <el-form-item label="发票抬头的类型"  style="width: 100%" label-width="200px">
          <el-radio v-model="detailForm.header_type" label="企业"
            >企业</el-radio
          >
          <el-radio v-model="detailForm.header_type" label="个人"
            >个人</el-radio
          >
        </el-form-item>
        <el-form-item
          label="发票的具体抬头名称"
          prop="invoice_header"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.invoice_header"></el-input>
        </el-form-item>
        

        <el-form-item
          label="纳税人识别号"
          prop="taxpayer_identification_number"
           style="width: 100%" label-width="200px"
        >
          <el-input
            v-model="detailForm.taxpayer_identification_number"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="注册时登记的电话"
          prop="registered_phone"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.registered_phone"></el-input>
        </el-form-item>

        <el-form-item
          label="开具发票的地址"
          prop="invoice_address"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.invoice_address"></el-input>
        </el-form-item>

        <el-form-item
          label="开户的名称"
          prop="account_opening_name"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.account_opening_name"></el-input>
        </el-form-item>

        <el-form-item
          label="开户银行的名称"
          prop="opening_bank"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.opening_bank"></el-input>
        </el-form-item>

        <el-form-item label="银行账号" prop="bank_account"  style="width: 100%" label-width="200px">
          <el-input v-model="detailForm.bank_account"></el-input>
        </el-form-item>

        <el-form-item
          label="发票寄送的地址"
          prop="shipping_address"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.shipping_address"></el-input>
        </el-form-item>

        <el-form-item
          label="发票寄送的联系人"
          prop="shipping_contact_person"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.shipping_contact_person"></el-input>
        </el-form-item>

        <el-form-item
          label="发票寄送联系人的电话"
          prop="shipping_contact_phone"
           style="width: 100%" label-width="200px"
        >
          <el-input v-model="detailForm.shipping_contact_phone"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="lgm-reset-btn" @click="dialogVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="dialogConfirm('ruleForm')"
          class="lgm-search-btn"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  financestaticAdmin,
  clothing_categoryAdmin,
 
  financeAdmin,
} from "@/api/admin";

export default {
  name: "StyleManage",
  data() {
    return {
      page: 1,
      page_size: 10,
      total: 0,
      detail: {},
      clothing_categoryAdminList: [],
      styleAdminList: [],
      sizeList: [],
      colorList: [],

      searchParams: {
        type: "",
        start_at: "",
        end_at: "",
        time1: "",
        supplier_name: "",
      },
      detailForm: {
        type: "1",
        payment_code: "",
        payment_at: "",
        supplier_name: "",
        contract_no: "",
        contract_price: "",
        outstane_type: "",
        pay_type: "",
        remark: "",
        invoice_number: "",
        invoice_date: "",
        invoice_code: "",
        applicant: "",
        customer_name: "",
        sales_contract_number: "",
        associated_return_payment: "",
        return_payment_amount: "",
        invoice_amount: "",
        invoice_type: "",
        header_type: "企业",
        invoice_header: "",
        taxpayer_identification_number: "",
        registered_phone: "",
        invoice_address: "",
        account_opening_name: "",
        opening_bank: "",
        bank_account: "",
        shipping_contact_person: "",
        shipping_contact_phone: "",
      },
      rules: {},
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      dataList: [],
      dialogVisible: false,
    };
  },

  mounted() {
    this.financestaticAdminFn();
  
    this.financeAdminFn();
  },
  methods: {
    handleSizeChange(value) {
      this.page_size = value;
      this.financeAdminFn();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.financeAdminFn();
    },
    financeAdminFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_at"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_at"] = this.formatDate(this.searchParams.time1[1]);
      }
      financeAdmin(
        {
          page: this.page,
          page_size: this.page_size,
          ...obj,
        },
        "GET"
      ).then((e) => {
        console.log(e.data.list);
        this.dataList = e.data.list;
        this.total = e.data.total;
      });
    },
    dialogConfirm() {
      console.log(this.detailForm);
      financeAdmin(
        this.detailForm,
        this.detailForm.id ? "PATCH" : "POST",
        this.detailForm.id
      ).then((e) => {
        this.dialogVisible = false;
        this.seach();
      });
    },

    seach() {
      this.page = 1;
      this.financeAdminFn();
      this.financestaticAdminFn();
    },
    reset() {
      for (let i in this.searchParams) {
        this.searchParams[i] = null;
      }
      this.seach();
    },

    addList() {
      this.detailForm = {
        type: "1",
        payment_code: "",
        payment_at: "",
        supplier_name: "",
        contract_no: "",
        contract_price: "",
        outstane_type: "",
        pay_type: "",
        remark: "",
        invoice_number: "",
        invoice_date: "",
        invoice_code: "",
        applicant: "",
        customer_name: "",
        sales_contract_number: "",
        associated_return_payment: "",
        return_payment_amount: "",
        invoice_amount: "",
        invoice_type: "",
        header_type: "企业",
        invoice_header: "",
        taxpayer_identification_number: "",
        registered_phone: "",
        invoice_address: "",
        account_opening_name: "",
        opening_bank: "",
        bank_account: "",
        shipping_contact_person: "",
        shipping_contact_phone: "",
      };
      this.dialogVisible = true;
    },
    handleEdit(idx, item) {
      item['type']=item.type+''
        this.detailForm =JSON.parse( JSON.stringify(item));

        this.dialogVisible = true;
    },
    handleDelete(index, item) {
      this.$confirm("是否确认删除选中的?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "submitDeleteBtn",
        type: "warning",
      }).then(() => {
        financeAdmin({}, "DELETE", item.id).then((e) => {
          this.seach();
        });

        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
 
  

    
    clickItem() {
      console.log(456);
    },
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    financestaticAdminFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_at"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_at"] = this.formatDate(this.searchParams.time1[1]);
      }

      financestaticAdmin(obj, "GET").then((e) => {
        this.detail = e.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.app-container {
  .content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
  }

  .lgm-search {
    ::v-deep input {
      width: 210px;
    }
  }

  .info {
    display: flex;
    margin-bottom: 20px;
    .item {
      width: 220px;
      padding: 8px 15px;
      border: 1px solid #eee;
      border-radius: 6px;
      margin-right: 30px;
      .title {
        margin-bottom: 6px;
      }
      .box {
        width: 100%;
        height: 100px;
        border-radius: 6px;
        background-color: #fdf0e5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $fontColor;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
}
</style>
